<html>
    <head>
        <title></title>
        <style>
            .line{
                border-top:1px solid #aaa;
                border-bottom:1px solid #aaa;
                padding: 10px;
            }

            #p{
                width:60px;
                height: 40px;
                background-color: #92B901;
                color: white;
                font: bold 12px '微软雅黑', Verdana, Arial, Helvetica, sans-serif;
                padding: 20px 10px 0 10px;
                border-radius: 1em;
                text-align: center;
                transition-duration: 0.5s;
                -webkit-animation: p 3s 1;
                -o-animation: p 3s 1;
                animation: p 3s 1;
                animation-delay: 0.5s;
                animation-timing-function: ease-in-out;
                position:relative;
            }

            @keyframes p{
                25%{ transform: rotate(30deg); background-color: #3293B9;left:0px;}
                50%{ transform: rotate(0deg);background-color: #3293B9; left:500px;}
                100%{ transform: rotate(-360deg); background-color: #92B901; left:0px;}
            }

        </style>
    </head>
    <body>
        <div class="line">
            <p id="p">我是滚蛋</p>
        </div>
    </body>
</html>